<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port :name="condition['search_EQ_portCode']"
                                     v-model="condition['search_EQ_portCode']"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态">
                        <el-select v-model="condition['search_EQ_planStatus']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictShipPlanStatus" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名">
                        <el-input v-model="condition['search_LIKE_shipName']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="航次">
                        <el-input v-model="condition['search_LIKE_voyage']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="创建日期">
                        <date-slot :startDate.sync="condition.search_GTE_createDateTime"
                                   :endDate.sync="condition.search_LTE_createDateTime"></date-slot>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" class="ml-80" @click="loadData">查 询</el-button>
                    <el-button @click="handleReset">重 置</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="mt-10 ">
            <el-col :span="16" style="display: flex;justify-content: space-between">
                <title-point color="#50B155">
                    <div slot="content">
                        未作业 :
                        <span style="font-size: 16px">{{ noWork.shiptime }} 艘 {{ noWork.teu }} TEU</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        作业中 :
                        <span style="font-size: 16px">{{ operation.shiptime }} 艘 {{ operation.teu }} TEU</span></div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        已完成 :
                        <span style="font-size: 16px">{{ completed.shiptime }} 艘 {{ completed.teu }} TEU</span></div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="data" :default-expand-all="false" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <div class="plan-expand" v-pd="true">
                        <div class="load-flex" style="width: 500px">
                            <span>内贸,空</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.IE.planNum"
                                        :noNum="scope.row.shipPlanDetails.IE.noWork"
                                        :num="scope.row.shipPlanDetails.IE.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.IE.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.IE.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.IE.planNum }} TEU</span>
                        </div>
                        <div class="load-flex" style="width: 500px">
                            <span>内贸,重</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.IF.planNum"
                                        :noNum="scope.row.shipPlanDetails.IF.noWork"
                                        :num="scope.row.shipPlanDetails.IF.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.IF.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.IF.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.IF.planNum }} TEU</span>
                        </div>
                        <div class="load-flex" style="width: 500px">
                            <span>外贸,空</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.OE.planNum"
                                        :noNum="scope.row.shipPlanDetails.OE.noWork"
                                        :num="scope.row.shipPlanDetails.OE.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.OE.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.OE.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.OE.planNum }} TEU</span>
                        </div>
                        <div class="load-flex" style="width: 500px">
                            <span>外贸,重</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.OF.planNum"
                                        :noNum="scope.row.shipPlanDetails.OF.noWork"
                                        :num="scope.row.shipPlanDetails.OF.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.OF.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.OF.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.OF.planNum }} TEU</span>
                        </div>

                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="shipPlanNo" label="计划编号"  min-width="120">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleFormOpen(scope.row)">{{ scope.row.shipPlanNo }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="shipName" label="船名"  min-width="120"></el-table-column>
            <el-table-column prop="voyage" label="航次"  min-width="80"></el-table-column>
            <el-table-column prop="portName" label="作业港口"  min-width="110"></el-table-column>
            <el-table-column prop="planType" label="计划类型"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.planType | _filterShipPlanType }}
                </template>
            </el-table-column>
            <el-table-column prop="isPortClose" label="港口封航"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.isPortClose | _filterOneOrZero }}
                </template>
            </el-table-column>
            <el-table-column prop="planStatus" label="作业状态"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.planStatus | _filterShipPlanStatus }}
                </template>
            </el-table-column>
            <el-table-column prop="taskTime" label="完成日期"  min-width="140">
                <template slot-scope="scope">
                    {{ scope.row.taskTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column prop="CloseTime" label="封航日期"  min-width="140">
                <template slot-scope="scope">
                    {{ scope.row.CloseTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column prop="planFrom" label="数据来源"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.planFrom | filterDate }}
                </template>
            </el-table-column>
            <el-table-column prop="createDateTime" label="创建时间"  min-width="160"></el-table-column>
            <el-table-column fixed="right" align="center" label="操作"  width="140">
                <template slot-scope="scope">
                    <el-button size="small" type="text"
                               @click="handleFormOpen(scope.row)">计划详情
                    </el-button>
                    <el-button size="small" v-if="scope.row.planStatus==='TWO'||scope.row.planStatus==='FOUR'||scope.row.planStatus==='FIVE'||scope.row.planStatus==='SIX'"
                               type="text" @click="handleReport(scope.row)">理箱报告
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { getZcPage, getZcCount } from "../../../api/shipPlan/shipPlan";
    import titlePoint from '../common/title-point'
    import dateSlot from '@/components/date/dateSlot'
    import selectPort from '@/components/select/selectPort'
    import { newExportExcel } from "@/utils/newExport";
    import { shipPlanType, trueOrFalse, shipPlanStatus } from "../../../assets/dict";
    import zProgress from '@/components/progress/z-progress'
    import { getLocalTime } from "../../../utils/dateFormat";

    export default {
        name: "装船查询",
        components: { titlePoint, dateSlot, selectPort, zProgress },
        data() {
            return {
                condition: this.clearCondition(),
                data: [],
                noWork: {},
                operation: {},
                completed: {},
            }
        },
        mounted() {
            let data = sessionStorage.getItem('load-params')
            if (data) {
                let time = JSON.parse(data)
                this.condition.search_GTE_createDateTime = time.search_GTE_createDateTime
                this.condition.search_LTE_createDateTime = time.search_LTE_createDateTime
            }
            this.loadData()
        },
        methods: {
            loadData() {
                let params = this.$assist.copySearchConditions(this.condition)
                params.search_EQ_planType = 'ZC'
                getZcPage(params).then(res => {
                    this.data = res.data.aaData
                    getZcCount(params).then(r => {
                        this.noWork = r.data.noWork
                        this.operation = r.data.operation
                        this.completed = r.data.completed
                    })
                })
            },
            handleReset() {
                this.condition = this.clearCondition()
            },
            clearCondition() {
                return {
                    search_EQ_portCode: '',
                    search_EQ_planStatus: '',
                    search_LIKE_shipName: '',
                    search_LIKE_voyage: '',
                    search_GTE_createDateTime: getLocalTime(new Date(), "YYYY-MM-DD")+' 00:00:00',
                    search_LTE_createDateTime: getLocalTime(new Date(), "YYYY-MM-DD")+' 23:59:59',
                }
            },
            handleFormOpen(item) {
                sessionStorage.setItem('loadDetail', item.shipPlanNo)
                this.$router.push({ path: '/work/query/loadDetail', name: '装船计划详情' })
            },
            handleReport(item) {
                sessionStorage.setItem('reportId', item.shipPlanNo)
                this.$router.push({ path: '/work/shipPlan/report', name: '装船理箱报告' })
            },
            handleExport() {
                let map = new Map();
                map.set("shipPlanNo", "计划编号");
                map.set("shipName", "船名");
                map.set("voyage", "航次");
                map.set("portName", "作业港口");
                map.set("planType", "计划类型");
                map.set("isPortClose", "港口封航");
                map.set("planStatus", "作业状态");
                map.set("taskTime", "完成日期");
                map.set("feeCloseTime", "封航日期");
                map.set("planFrom", "数据来源");
                map.set("createDateTime", "创建时间");
                let params = this.$assist.copySearchConditions(this.condition)
                params.search_EQ_portCode = 'ZC'
                getZcPage(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "planType") {
                                record[key] = shipPlanType.get(record[key]);
                            }
                            if (key === "isPortClose") {
                                record[key] = trueOrFalse.get(record[key]);
                            }
                            if (key === "planStatus") {
                                record[key] = shipPlanStatus.get(record[key]);
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("装船查询", exportRecords);
                })
            },
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        }
    }
</script>

<style scoped>
    .load-flex {
        display: flex;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .plan-expand {
        width: 1020px;
        margin-left: 20px;
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .plan-expand span {
        margin-right: 10px;
    }
</style>
